<template>
	<view>
		<view class="flex-c-c-c" :style="{height:height+'rpx',width:width+'rpx'}">
			<map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="markers"></map>
			<!-- <map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude"></map> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: "storeMap",
		props: {
			height: {
				type: Number,
				default: 720
			},
			width: {
				type: Number,
				default: 750
			},
			latitude: {
				type: Number,
				// default: 30.529558
			},
			longitude: {
				type: Number,
				// default: 104.090366
			},
			scale: {
				type: Number,
				default: 20
			},
			name: {
				type: String,
				default: '氧发堂'
			}
		},
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				markers: [{
					id: 0,
					latitude: null,
					longitude: null,
					iconPath: '../static/icon/ditu.png',
					label: {
						content: null,
						color: '#000',
						fontSize: 16,
						x: null,
						y: null,
						textAlign: 'conter',
						joinCluster: false
					}
				}]
				// markers: [{
				// 	id: 0,
				// 	latitude: 30.529558,
				// 	longitude: 104.090388,
				// 	iconPath: '../static/icon/position1.png',
				// 	label: {
				// 		content: '氧发堂1店',
				// 		color: '#000',
				// 		fontSize: 16,
				// 		x: 30.529558,
				// 		y: 104.090388,
				// 		textAlign: 'conter',
				// 		joinCluster: false
				// 	}
				// }, {
				// 	id: 1,
				// 	latitude: 30.53,
				// 	longitude: 104.1,
				// 	iconPath: '../static/icon/position1.png',
				// 	label: {
				// 		content: '氧发堂2店',
				// 		color: '#000',
				// 		fontSize: 16,
				// 		x: 30.53,
				// 		y: 104.1,
				// 		textAlign: 'conter',
				// 		joinCluster: false
				// 	}
				// }]
			};
		},
		mounted() {
			console.log(this.latitude,this.longitude)
			this.markers[0].latitude = this.latitude
			this.markers[0].label.x = this.latitude
			this.markers[0].longitude = this.longitude
			this.markers[0].label.y = this.longitude
			this.markers[0].label.content = this.name
		}
	}
</script>

<style lang="less" scoped>

</style>
